<template>
    <el-card shadow="never">
        <!--  <el-form ref="form" :model="form" :rules="rules" label-width="100px">


              <el-row :gutter="15">

                      <el-form-item label="名称:" prop="name">
                          <el-input type="text" v-model="form.name" label="" clearable></el-input>
                      </el-form-item>



                      <el-form-item label="账号:" prop="username">
                          <el-input type="text" v-model="form.username" label="描述" clearable></el-input>
                      </el-form-item>


                      <el-form-item label="密码:" prop="password">
                          <el-input type="password" v-model="form.password" label="描述" clearable></el-input>
                      </el-form-item>


                  <el-form-item label="阿里云访问域名:" prop="oss_url">
                      <el-input
                              clearable
                              v-model="form.oss_url"
                              placeholder="阿里云访问域名"
                      />
                  </el-form-item>
                  <el-form-item label="阿里云公钥信息:" prop="oss_accessId" >
                      <el-input
                              clearable
                              v-model="form.oss_accessId"
                              placeholder="阿里云公钥信息"
                      />
                  </el-form-item>

                  <el-form-item label="阿里云私钥信息:" prop="oss_accessSecret" >
                      <el-input
                              clearable
                              v-model="form.oss_accessSecret"
                              placeholder="阿里云私钥信息"
                      />
                  </el-form-item>

                  <el-form-item label="阿里云空间名称:" prop="oss_bucket" >
                      <el-input
                              clearable
                              v-model="form.oss_bucket"
                              placeholder="阿里云空间名称"
                      />
                  </el-form-item>
                  <el-form-item label="阿里云数据中心:" prop="oss_endpoint" >
                      <el-input
                              clearable
                              v-model="form.oss_endpoint"
                              placeholder="阿里云数据中心"
                      />
                  </el-form-item>

                  <el-form-item  label="是否开启声音机器:">
                      <el-radio-group v-model="form.sound_swich">
                          <el-radio :label="0" :value="0">没开启</el-radio>
                          <el-radio :label="1" :value="1">开启</el-radio>
                      </el-radio-group>
                  </el-form-item>

                  <el-button type="primary" :loading="loading" @click="save">添加独立部署账号</el-button>

              </el-row>


          </el-form>
  -->

        <el-card :bordered="false" dis-hover class="ivu-mt" :header="'账号列表'">

            <!-- 数据表格 -->


            <ele-pro-table ref="table" :datasource="datasource" :columns="columns">

                <template v-slot:toolbar>
                    <el-button
                            size="small"
                            type="primary"
                            icon="el-icon-plus"
                            class="ele-btn-icon"
                            @click="openEdit()"
                    >
                        新增
                    </el-button>

                </template>

                <template v-slot:sound_swich="{ row }">
                <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="row.sound_swich"
                        @change="editStatus(row)"
                />
            </template>

                <template v-slot:avatar_swich="{ row }">
                    <el-switch
                            :active-value="1"
                            :inactive-value="0"
                            v-model="row.avatar_swich"
                            @change="avatarswich(row)"
                    />
                </template>

                <!-- 操作列 -->
                <template v-slot:action="{ row }">

                    <el-popconfirm
                            class="ele-action"
                            title="确定要删除此条记录吗？"
                            @confirm="remove(row)"
                    >
                        <template v-slot:reference>
                            <el-link type="danger" :underline="false" icon="el-icon-delete">
                                删除
                            </el-link>
                        </template>
                    </el-popconfirm>
                    <el-link

                            type="primary"
                            :underline="false"
                            icon="el-icon-edit"
                            @click="openEdit(row)"
                    >
                        修改
                    </el-link>
                </template>


            </ele-pro-table>
            <independence-edit :account_id="account_id" :visible.sync="showEdit" :data="current" @done="reload"/>

        </el-card>


    </el-card>

</template>

<script>


    import {compositeList, add, remove, modify} from '@/api/composite/';
    import independenceEdit from './independence-edit';

    const DEFAULT_FORM = {
        account_id: 0,
        type: 1,
        point: '',
    };

    export default {
        name: 'AccountLog',
        components: {independenceEdit,},
        props: {
            // 弹窗是否打开
            visible: Boolean,
            // 修改回显的数据
            data: [],

            uid: {
                type: Number,
                default: 0
            },
        },
        data() {
            return {
                account_id:0,
                // 表格列配置
                columns: [
                    {
                        columnKey: 'selection',
                        type: 'selection',
                        width: 45,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        columnKey: 'index',
                        type: 'index',
                        width: 45,
                        align: 'center',
                        showOverflowTooltip: true,
                        fixed: 'left'
                    },

                    {
                        prop: 'name',
                        label: '名称',
                        showOverflowTooltip: true,
                        minWidth: 110,

                    },
                    {
                        prop: 'username',
                        label: '账号',
                        showOverflowTooltip: true,
                        minWidth: 110,

                    },
                    {
                        prop: 'password',
                        label: '密码',
                        showOverflowTooltip: true,
                        minWidth: 110,

                    },
                    {
                        prop: 'avatar_swich',
                        label: '是否开机',
                        showOverflowTooltip: true,
                        minWidth: 110,
                        slot: 'avatar_swich'

                    },
                    {
                        prop: 'sound_swich',
                        label: '是否开启声音机器',
                        showOverflowTooltip: true,
                        minWidth: 110,
                        slot: 'sound_swich'

                    },
                    {
                        prop: 'oss_url',
                        label: '阿里云访问域名',
                        showOverflowTooltip: true,
                        minWidth: 110,

                    },
                    {
                        prop: 'oss_accessId',
                        label: '阿里云公钥信息',
                        showOverflowTooltip: true,
                        minWidth: 110,

                    },
                    {
                        prop: 'oss_accessSecret',
                        label: '阿里云私钥信息',
                        showOverflowTooltip: true,
                        minWidth: 110,

                    },
                    {
                        prop: 'oss_bucket',
                        label: '阿里云空间名称',
                        showOverflowTooltip: true,
                        minWidth: 110,

                    },

                    {
                        prop: 'oss_endpoint',
                        label: '阿里云数据中心',
                        showOverflowTooltip: true,
                        minWidth: 110,

                    },

                    {
                        prop: 'due_time',
                        label: '到期时间',
                        showOverflowTooltip: true,
                        minWidth: 100
                    },
                    {
                        prop: 'create_time',
                        label: '操作时间',
                        showOverflowTooltip: true,
                        minWidth: 100
                    },
                    {
                        columnKey: 'action',
                        label: '操作',
                        width: 150,
                        align: 'center',
                        resizable: false,
                        slot: 'action',
                        hideInSetting: true,
                        showOverflowTooltip: true
                    }
                ],
                showEdit: false,
                // 表单数据
                form: {...DEFAULT_FORM},

                rules: {},
                // 提交状态
                loading: false,
                // 是否是修改
                isUpdate: false,
                current:null
            };
        },
        methods: {
            /* 表格数据源 */
            datasource({page, limit, where, order, filterValue}) {
                where.account_id = this.data.id;
                return compositeList({
                    ...where,
                    ...order,
                    ...filterValue,
                    page,
                    limit,

                });
            },

            /* 刷新表格 */
            reload(where) {
                this.$refs.table.reload({page: 1, where: where});
            },

            /* 保存编辑 */
            save() {

                this.$refs['form'].validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    this.loading = true;

                    const data = {
                        ...this.form,
                        account_id: this.data.id
                    };

                    add(data).then((msg) => {
                        this.$message.success(msg);
                        this.reload();
                        this.loading = false;
                    }).catch((e) => {
                        this.$message.error(e.message);
                        this.loading = false;
                    });


                });
            },
            /* 更新visible */
            updateVisible(value) {
                this.$emit('update:visible', value);
            },
            /* 删除 */
            remove(row) {
                const loading = this.$loading({lock: true});
                remove(row.id)
                    .then((msg) => {
                        loading.close();
                        this.$message.success(msg);
                        this.reload();
                    })
                    .catch((e) => {
                        loading.close();
                        this.$message.error(e.message);
                    });
            },
            editStatus(row) {
                const loading = this.$loading({lock: true});
                modify({id: row.id, field: 'sound_swich', value: row.sound_swich})
                    .then((msg) => {
                        loading.close();
                        this.$message.success(msg);
                    })
                    .catch((e) => {
                        loading.close();
                        row.sound_swich = row.sound_swich == 1 ? 1 : 0;
                        this.$message.error(e.message);
                    });
            },

            avatarswich(row) {
                const loading = this.$loading({lock: true});
                modify({id: row.id, field: 'avatar_swich', value: row.avatar_swich})
                    .then((msg) => {
                        loading.close();
                        this.$message.success(msg);
                    })
                    .catch((e) => {
                        loading.close();
                        row.avatar_swich = row.avatar_swich == 1 ? 1 : 0;
                        this.$message.error(e.message);
                    });
            },
            openEdit(row) {

                 this.current = row;
                this.showEdit = true;
                this.account_id=this.data.id;
            },
        },
        watch: {
            uid() {
                this.reload();
            },
            visible(visible) {
                if (visible) {

                    if (this.data) {
                        this.form = {...DEFAULT_FORM};
                        this.$util.assignObject(this.form, this.data);
                        this.isUpdate = true;
                        this.form.account_id = this.data.id;
                    } else {
                        this.isUpdate = false;
                    }
                } else {
                    this.$refs['form'].clearValidate();
                    this.form = {...DEFAULT_FORM};
                }
            }
        }
    };
</script>
